<template>
	<view class="container">
		<view class="header">
			<text class="title">门店收益综合数据</text>
			<text class="progress">时间进度 {{no_jd.toFixed(2)}}%</text>
		</view>

		<view class="filters">
			<uni-data-select v-model="value" :localdata="range" @change="change" />
			<uni-datetime-picker @change="maskClick" v-model="datetimerange" type="date" />
		</view>

		<view class="section">
			<text class="section-title">日：营收统计报表</text>
			<scroll-view scroll-x="true" class="table-container">
				<view class="table">
					<view class="table-header">
						<view v-for="(item, index) in fun_list" :key="index" class="table-cell">{{item.title}}</view>
					</view>
					<view v-for="(items, indexs) in data_list" :key="indexs" class="table-row">
						<view v-for="(item, index) in items" :key="index" class="table-cell">
							<text v-if="item.type=='1'">{{item.title}}</text>
							<view v-if="item.type=='2'" class="progress-bar"
								:style="{width: item.content+'%', backgroundColor: index == 2 ? (item.content >= no_jd ?'#15ADBA' : '#D41E18') : jd_color[index%9]}">
								{{item.content.toFixed(2)}}%
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="section">
			<text class="section-title">渠道分布</text>
			<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
		</view>

		<view class="section">
			<text class="section-title">月：门店营收统计报表</text>
			<scroll-view scroll-x="true" class="table-container">
				<view class="table">
					<view class="table-header">
						<view v-for="(item, index) in fun_list" :key="index" class="table-cell">{{item.title}}</view>
					</view>
					<view v-for="(items, indexs) in data_list_month" :key="indexs" class="table-row">
						<view v-for="(item, index) in items" :key="index" class="table-cell">
							<text v-if="item.type=='1'">{{item.title}}</text>
							<view v-if="item.type=='2'" class="progress-bar"
								:style="{width: item.content+'%', backgroundColor: index == 2 ? (item.content >= no_jd ?'#15ADBA' : '#D41E18') : jd_color[index%9]}">
								{{item.content.toFixed(2)}}%
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		

		<view class="section">
			<text class="section-title">渠道分布 (月)</text>
			<qiun-data-charts type="ring" :opts="opts" :chartData="chartData_month" />
			<view class="room-info">
				<text>总房数: {{kf_cnt}}</text>
				<text>维修房: {{wxf_cnt}}</text>
			</view>
		</view>

		<view class="section">
			<text class="section-title">周：OCC,ADR分析表</text>
			<qiun-data-charts type="mix" :opts="week_opts" :chartData="weeek_data" />
		</view>

		<view class="section">
			<text class="section-title">OCC、ADR同期对比</text>
			<qiun-data-charts type="mix" :opts="year_opts" :chartData="year_data" />
		</view>

		<view class="section">
			<text class="section-title">集团OCC达标率</text>
			<qiun-data-charts type="gauge" :opts="ybp" :chartData="ybp_data" />
		</view>
		<uni-popup ref="updatePopup" type="center">
			<view class="update-popup">
				<view class="title">发现新版本</view>
				<view class="version">最新版本: {{updateInfo.version}}</view>
				<view class="changelog">
					<text>更新内容：</text>
					<text>{{updateInfo.changelog}}</text>
				</view>
				<view class="progress" v-if="downloading">
					<progress :percent="downloadProgress" show-info stroke-width="3" />
				</view>
				<view class="buttons">
					<button @click="closePopup">取消</button>
					<button type="primary" @click="startUpdate">立即更新</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import checkUpdate from '../../util/update.js'
	export default {
		data() {
			return {
				updateInfo: {},
				downloading: false,
				downloadProgress: 0,
				kf_cnt: 0,
				fw_cnt: 0,
				wxf_cnt: 0,
				datetimerange: '2024-10-01 20:34:31',
				fun_list: [{
					title: '酒店名称',
					width: '230px'
				}, {
					title: '完成额',
					width: '110px'
				}, {
					title: '完成比',
					width: '150px'
				}, {
					title: 'OCC',
					width: '150px'
				}, {
					title: 'ADR',
					width: '80px'
				}, {
					title: 'RP',
					width: '80px'
				}, {
					title: 'GMV',
					width: '80px'
				}, {
					title: '总房数',
					width: '70px'
				}, {
					title: '房晚数',
					width: '70px'
				}],
				ybp_data: {
					categories: [{
						"value": 0.6,
						"color": "#f04864"
					}, {
						"value": 1,
						"color": "#2fc25b"
					}],
					series: [{
						name: "完成率",
						data: 0.66
					}]
				},
				ybp: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "65%",
						fontSize: 25,
						color: "#2fc25b",
						offsetY: 50
					},
					subtitle: {
						name: "OCC达标率",
						fontSize: 15,
						color: "rgba(255,255,255,0.9)",
						offsetY: -50
					},
					extra: {
						gauge: {
							type: "default",
							width: 20,
							labelColor: "rgba(255,255,255,0.9)",
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							labelFormat: "",
							splitLine: {
								fixRadius: 0,
								splitNumber: 10,
								width: 20,
								color: "#FFFFFF",
								childNumber: 5,
								childWidth: 12
							},
							pointer: {
								width: 24,
								color: "auto"
							}
						}
					}
				},
				year_data: {
					categories: ["2024-09", "2023-09"],
					series: [{
							name: "OCC",
							index: 1,
							type: "column",
							data: [40, 30]
						},
						{
							name: "ADR",
							type: "line",
							color: "#ea7ccc",
							data: [40, 30]
						}
					]
				},
				year_opts: {
					color: ["#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						fontColor: "rgba(255,255,255,1)"
					},
					yAxis: {
						disabled: false,
						disableGrid: true,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "rgba(255,255,255,0.2)",
						padding: 10,
						showTitle: true,
						data: [{
								position: "left",
								title: "折线"
							},
							{
								position: "right",
								min: 0,
								max: 200,
								title: "柱状图",
								textAlign: "left"
							}
						]
					},
					extra: {
						mix: {
							column: {
								width: 40,
								barBorderRadius: [
									6,
									6,
									0,
									0
								]
							}
						}
					}
				},
				weeek_data: {
					categories: ["09-12", "09-13", "09-14", "09-15", "09-16", "09-17", "09-18", "09-19"],
					series: [{
							name: "OCC",
							index: 1,
							type: "column",
							data: [40, 30, 55, 70, 24, 58, 118, 123]
						},
						{
							name: "ADR",
							type: "line",
							color: "#2fc25b",
							data: [40, 30, 55, 70, 24, 58, 68, 70]
						}
					]
				},
				week_opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						fontColor: "rgba(255,255,255,1)"
					},
					yAxis: {
						disableGrid: true,

						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: true,
						data: [{
								position: "left",
								title: "折线"
							},
							{
								position: "right",
								min: 0,
								max: 200,
								title: "柱状图",
								textAlign: "left"
							}
						]
					},
					extra: {
						mix: {
							column: {
								width: 20
							}
						}
					}
				},
				chartData_month: {
					series: [{
						data: [{
							"name": "携程",
							"value": 50,
							"labelText": "携程:50人"
						}, {
							"name": "美团",
							"value": 30,
							"labelText": "美团:30人"
						}, {
							"name": "抖音",
							"value": 20,
							"labelText": "抖音:20人"
						}, {
							"name": "去哪",
							"value": 18,
							"labelText": "去哪:18人"
						}, {
							"name": "会员",
							"value": 8,
							"labelText": "会员:8人"
						}]
					}]
				},
				chartData: {
					series: [{
						data: [{
							"name": "携程",
							"value": 50,
							"labelText": "携程:50人"
						}, {
							"name": "美团",
							"value": 30,
							"labelText": "美团:30人"
						}, {
							"name": "抖音",
							"value": 20,
							"labelText": "抖音:20人"
						}, {
							"name": "去哪",
							"value": 18,
							"labelText": "去哪:18人"
						}, {
							"name": "会员",
							"value": 8,
							"labelText": "会员:8人"
						}]
					}]
				},
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					ringWidth: 150,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 25
					},
					title: {
						name: "房晚数",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "88",
						fontSize: 15,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 40,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				no_jd: 100,
				single: '',
				jd_color: ["#4B98FE", "#00D05E", "#957BFE", "#FE871B", "#00C8B0",
					"#F674D6"
				],
				backgrounds: ['rgba(89,126,155,1)', 'rgba(84,120,154,1)'],
				data_list_month: [
					[{
						width: '150px',
						type: '1',
						title: '话题酒店（昆明机场店）',
						content: '话题酒店（昆明机场店）'
					}, {
						width: '100px',
						type: '1',
						title: '50000',
						content: '10000'
					}, {
						width: '140px',
						type: '2',
						title: 50.00,
						content: 50.00
					}, {
						width: '140px',
						type: '2',
						title: 38.00,
						content: 38.00
					}, {
						width: '70px',
						type: '1',
						title: '91.38',
						content: '91.38'
					}, {
						width: '70px',
						type: '1',
						title: '34.72',
						content: '34.72'
					}, {
						width: '70px',
						type: '1',
						title: '193.00',
						content: '193.00'
					}, {
						width: '60px',
						type: '1',
						title: '79',
						content: '79'
					}, {
						width: '60px',
						type: '1',
						title: '79',
						content: '79'
					}]
				],
				data_list: [],
				value: 0,
				range: [{
						value: 0,
						text: "集团数据"
					},
					{
						value: 1,
						text: "话题酒店（昆明机场店）"
					},
					{
						value: 2,
						text: "话题民宿（昆明机场店）"
					}, {
						value: 3,
						text: '话题酒店（江岸店)'
					},
				],
				date: '2023-07',

			}
		},
		onLoad() {
			const date = new Date();
			// 获取前一天的日期
			this.checkForUpdate()
			date.setDate(date.getDate() - 1);
			uni.$on('updateProgress', (data) => {
				this.downloadProgress = data.progress;
			});
			// 正确格式化日期
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');

			// 设置为 YYYY-MM-DD 格式
			this.datetimerange = `${year}-${month}-${day}`;
			this.no_jd = (date.getDate() / new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()).toFixed(4) * 100
			var that = this
			console.log(this.datetimerange.split(' ')[0])
			uni.showLoading({
				title: '正在加载...'
			})
			uni.request({
				url: 'http://43.138.215.11:3384/get_day_data',
				// url: 'http://127.0.0.1:3383/get_day_data',
				method: 'POST',
				data: {
					time: this.datetimerange.split(' ')[0],
					hotel_name: this.value == 0 ? 'all' : this.range[this.value].text
				},
				success(res) {
					console.log(res.data)
					that.data_list = res.data.data.result_list
					that.chartData.series[0].data = res.data.data.ct_result
					that.weeek_data.categories = res.data.data.cate_list
					that.weeek_data.series[0].data = res.data.data.occ_sum_list
					that.weeek_data.series[1].data = res.data.data.adr_sum_list
					that.data_list_month = res.data.data.result_list_month
					that.chartData_month.series[0].data = res.data.data.ct_result_month
					that.wxf_cnt = res.data.data.wxf_cnt
					that.kf_cnt = res.data.data.kf_cnt
					var t = {}

					that.opts.subtitle.name = res.data.data.fw_cnt
					uni.hideLoading()
					console.log(that.chartData.series)
				}
			})
		},
		methods: {
			async checkForUpdate() {
				// console.log(1231231231)
				try {
					const result = await checkUpdate.check();

					if (result.update) {
						this.updateInfo = result;
						this.$refs.updatePopup.open();
					} else {
						uni.showToast({
							title: '当前已是最新版本',
							icon: 'none'
						});
					}
				} catch (err) {
					
					console.log(err)
					uni.showToast({
						title: '检查更新失败',
						icon: 'none'
					});
					uni.showModal({
						title:'123',
						content:err
					})
				}
			},

			closePopup() {
				this.$refs.updatePopup.close();
			},

			async startUpdate() {
				try {
					this.downloading = true;

					// 下载APK
					const filePath = await checkUpdate.downloadAPK(this.updateInfo.url);

					// 安装APK
					await checkUpdate.installAPK(filePath);

					this.downloading = false;
					this.closePopup();

				} catch (err) {
					this.downloading = false;
					uni.showToast({
						title: '更新失败',
						icon: 'none'
					});
				}
			},
			maskClick(e) {
				console.log(213)
				console.log('1231231231232maskClick事件:', e);
				this.get_data()
			},
			get_data() {
				var that = this
				uni.showLoading({
					title: '正在加载...'
				})
				console.log(this.datetimerange.split(' ')[0])
				uni.request({
					url: 'http://43.138.215.11:3384/get_day_data',

					method: 'POST',
					data: {
						time: this.datetimerange.split(' ')[0],
						hotel_name: this.value == 0 ? 'all' : this.range[this.value].text
					},
					success(res) {
						uni.hideLoading()
						console.log(res.data)
						that.data_list = res.data.data.result_list
						that.chartData.series[0].data = res.data.data.ct_result
						that.weeek_data.categories = res.data.data.cate_list
						that.weeek_data.series[0].data = res.data.data.occ_sum_list
						that.weeek_data.series[1].data = res.data.data.adr_sum_list
						that.data_list_month = res.data.data.result_list_month
						that.chartData_month.series[0].data = res.data.data.ct_result_month
						that.wxf_cnt = res.data.data.wxf_cnt
						that.kf_cnt = res.data.data.kf_cnt
						that.opts.subtitle.name = res.data.data.fw_cnt
						console.log(that.chartData.series)
					}
				})
			},
			change(e) {
				console.log(e)
				this.get_data()
			},
			startDate() {
				return this.getDate('start');
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			endDate() {
				return this.getDate('end');
			},
		}
	}
</script>

<style>
	page {
		background-color: rgba(12, 45, 88, 1);
		height: 100vh;
	}
	.update-popup {
	    background-color: #fff;
	    border-radius: 8px;
	    padding: 20px;
	    width: 80%;
	}
	
	.update-popup .title {
	    font-size: 18px;
	    font-weight: bold;
	    text-align: center;
	    margin-bottom: 15px;
	}
	
	.update-popup .version {
	    font-size: 16px;
	    margin-bottom: 10px;
	}
	
	.update-popup .changelog {
	    margin-bottom: 15px;
	}
	
	.update-popup .progress {
	    margin: 15px 0;
	}
	
	.update-popup .buttons {
	    display: flex;
	    justify-content: space-between;
	}
	
	.update-popup .buttons button {
	    width: 40%;
		font-size: 22rpx;
	}
	.container {
	    background-color: rgba(12, 45, 88, 1);
	    padding: 20rpx;
	}
	
	/* 头部样式 */
	.header {
	    margin-bottom: 20rpx;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	
	.header .title {
	    font-size: 36rpx;
	    color: #ffffff;
	    font-weight: bold;
	}
	
	.header .progress {
	    font-size: 28rpx;
	    color: rgba(255, 255, 255, 0.8);
	}

	.filters {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.section {
		background-color: rgba(174, 200, 225, 0.1);
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.9);
		margin-bottom: 20rpx;
	}

	.table-container {
		width: 100%;
		overflow-x: auto;
	}

	.table {
		width: 200%;
		/* Adjust based on your needs */
	}

	.table-header,
	.table-row {
		display: flex;
	}

	.table-cell {
		flex: 1;
		padding: 10rpx;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		border-right: 1px solid rgba(255, 255, 255, 0.2);
	}

	.progress-bar {
		height: 30rpx;
		border-radius: 15rpx;
		color: #ffffff;
		text-align: center;
		font-size: 24rpx;
		line-height: 30rpx;
	}

	.room-info {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.room-info text {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}
</style>